<!--
 * @Author: gitee 1758024667@qq.com
 * @Date: 2023-01-15 20:44:19
 * @LastEditors: gitee 1758024667@qq.com
 * @LastEditTime: 2023-04-04 07:38:04
 * @FilePath: \parking-lot-management\src\views\order\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 10px;margin-top: 20px;">
      <el-form-item label="用户">
        <el-input v-model="formInline.userId" placeholder="用户" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="formInline.carNumber" placeholder="车牌号" />
      </el-form-item>
      <el-form-item label="订单状态">
        <!-- 订单选择器 -->
        <el-select v-model="formInline.status" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="开始时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker v-model="ruleForm.date2" placeholder="选择时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表可编辑 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="startTime" label="开始时间" style="width: 10%" />
      <el-table-column prop="endTime" label="结束时间" style="width: 10%" />
      <el-table-column prop="carNumber" label="车牌号" style="width: 10%" />
      <el-table-column prop="positionId" label="停车位" style="width: 10%" />
      <el-table-column prop="parkingId" label="停车场地址" style="width: 10%" />
      <el-table-column prop="status" label="订单状态" style="width: 10%" />
      <el-table-column prop="userId" label="用户" style="width: 10%" />
      <el-table-column prop="money" label="金额" style="width: 10%" />
      <el-table-column prop="discountId" label="折扣费用" style="width: 10%" />
    </el-table>
    <!--分页 -->
    <el-pagination background layout="prev, pager, next" :total="this.total" style="padding: 30px 0; text-align: center;" @current-change="changeCurrentPage" />
  </div>
</template>

<script>
import { list, queryBycondition } from '@/api/order.js'
/*
 *@Date: 2023-01-14 22:06:37
 *@Description: 模块描述
*/
export default {
  name: '',
  data() {
    return {
      tableData: [{}],
      total: 0,
      formInline: {},
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      options: [{
        value: '1',
        label: '车辆尚未离开'
      }, {
        value: '2',
        label: '未支付订单'
      }, {
        value: '3',
        label: '订单已完成'
      }]
    }
  },
  created() {
    this.init()
  },
  mounted() { },
  methods: {
    // 初始化表格
    async init() {
      const res = await queryBycondition(this.formInline)
      const result = res.data.data.records
      this.total = res.data.data.total
      this.tableData = result
    },

    // 分页查询
    async onSubmit() {
      const res = await queryBycondition(this.formInline)
      const result = res.data.data.records
      this.total = res.data.data.total
      this.tableData = result
    },
    async changeCurrentPage(page) {
      this.formInline.page = page
      this.onSubmit()
    }
  }
}
</script>

<style lang="scss" scoped></style>
